<template>
  <div>
    <el-dialog title="编辑菜单" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" :model="form">
        <el-form-item label="菜单类型">
          <el-radio-group v-model="radio">
            <el-radio :label="1">顶级目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
            <el-radio :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="radio == 2 || radio == 3" label="上级菜单">
          <el-cascader
            ref="menuTree"
            style="width: 300px"
            v-model="form.pid"
            :options="options"
            @change="changeMenu"
            :props="{
              expandTrigger: 'hover',
              emitPath: false,
              checkStrictly: true,
              label: 'title',
              value: 'id',
            }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item prop="btnName" v-if="radio == 3" label="按钮名称">
          <el-input
            style="width: 300px"
            v-model="form.path"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="icon" v-if="radio == 3" label="菜单图标">
          <el-input
            style="width: 300px"
            v-model="form.icon"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="title" v-if="radio != 3" label="菜单名称">
          <el-input
            style="width: 300px"
            v-model="form.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="name" v-if="radio != 3" label="路由名称">
          <el-input
            style="width: 300px"
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="path" v-if="radio != 3" label="访问路径">
          <el-input
            style="width: 300px"
            v-model="form.path"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="component" v-if="radio != 3" label="组件路径">
          <el-input
            style="width: 300px"
            v-model="form.component"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单排序">
          <el-input-number
            v-model="form.sort"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
          <span v-if="radio == 1" style="margin-left: 40px; margin-right: 10px"
            >重定向</span
          >
          <el-input
            v-if="radio == 1"
            style="width: 150px"
            v-model="form.redirect"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="permissionValue" v-if="radio == 3" label="权限标识">
          <el-input
            style="width: 300px"
            v-model="form.permissionValue"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="radio != 3" label="是否显示">
          <el-switch
            v-model="form.hidden"
            active-color="#13ce66"
            inactive-color="#DCDFE6"
          >
          </el-switch>
          <span style="margin-left: 40px; margin-right: 10px">是否展示</span>
          <el-switch
            v-model="form.alwaysShow"
            active-color="#13ce66"
            inactive-color="#DCDFE6"
          >
          </el-switch>
        </el-form-item>
        <el-form-item v-if="radio != 3" label="meta属性">
          <el-row
            style="margin-left: 80px"
            v-for="(item, index) in meta"
            :key="index"
            :gutter="24"
          >
            <el-col :span="8" :offset="0">
              <el-input
                v-model="item.key"
                placeholder="商品库存英文名"
              ></el-input>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-input
                v-model="item.value"
                placeholder="比如: 商品库存"
              ></el-input>
            </el-col>
            <el-col :span="4" :offset="0"></el-col>
            <i
              style="
                color: #409eff;
                font-size: 24px;
                line-height: 40px;
                margin-left: 10px;
              "
              class="el-icon-circle-plus"
              @click="addMeta(index)"
            ></i>
            <i
              style="
                color: #f57982;
                font-size: 24px;
                line-height: 40px;
                margin-left: 10px;
              "
              class="el-icon-remove"
              @click="subtractMeta(index)"
            ></i>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" v-if="btnshow" @click="makeSure"
          >确 定</el-button
        >
        <el-button type="primary" v-else @click="upDate">更 新</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import menuApi from "@/api/authority/resource/index";
export default {
  components: {},

  data() {
    return {
      dialogFormVisible: false,
      btnshow: true,
      radio: 1,
      options: [],
      count: 1,
      meta: [
        {
          key: "",
          value: "",
        },
      ],
      form: {
        alwaysShow: false,
        children: [{}],
        component: "",
        hidden: false,
        icon: "",
        isDeleted: false,
        isSelect: false,
        level: 0,
        meta: "",
        name: "",
        path: "",
        permissionValue: "",
        pid: "",
        redirect: "",
        sort: 0,
        status: 0,
        title: "",
        type: 0,
      },
      rules: {
        name: [{ required: true, message: "路由名称", trigger: "blur" }],
        path: [{ required: true, message: "请输入访问路径", trigger: "blur" }],
        component: [
          { required: true, message: "请输入组件路径", trigger: "blur" },
        ],
        permissionValue: [
          { required: true, message: "请输入权限标识", trigger: "blur" },
        ],
        btnName: [
          { required: true, message: "请输入按钮名称", trigger: "blur" },
        ],
        title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        icon: [{ required: true, message: "请输入图标", trigger: "blur" }],
      },
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
    // 更新菜单
    upDate() {
      console.log(this.meta);
      var obj = {};
      this.meta.forEach((el) => {
        obj[el.key] = el.value;
      });
      console.log(obj);
      this.form.meta = JSON.stringify(obj);
      menuApi.update(this.form).then((res) => {
        if (res.success) {
          this.$message.success("更改成功");
          this.dialogFormVisible = !this.dialogFormVisible;
          this.$emit("tofather");
          this.init();
          this.form = {
            alwaysShow: false,
            children: [{}],
            component: "",
            hidden: false,
            icon: "",
            isDeleted: false,
            isSelect: false,
            level: 0,
            meta: "",
            name: "",
            path: "",
            permissionValue: "",
            pid: "",
            redirect: "",
            sort: 0,
            status: 0,
            title: "",
            type: 0,
          };
        } else {
          this.$message.error("更改失败");
          this.form = {
            alwaysShow: false,
            children: [{}],
            component: "",
            hidden: false,
            icon: "",
            isDeleted: false,
            isSelect: false,
            level: 0,
            meta: "",
            name: "",
            path: "",
            permissionValue: "",
            pid: "",
            redirect: "",
            sort: 0,
            status: 0,
            title: "",
            type: 0,
          };
        }
      });
    },
    // 保存
    makeSure() {
      console.log(this.meta);
      var obj = {};
      this.meta.forEach((el) => {
        obj[el.key] = el.value;
      });
      console.log(obj);
      this.form.meta = JSON.stringify(obj);
      menuApi.save(this.form).then((res) => {
        if (res.success) {
          this.$message.success("新增成功");
          this.dialogFormVisible = !this.dialogFormVisible;
          this.$emit("tofather");
          this.init();
          this.form = {
            alwaysShow: false,
            children: [{}],
            component: "",
            hidden: false,
            icon: "",
            isDeleted: false,
            isSelect: false,
            level: 0,
            meta: "",
            name: "",
            path: "",
            permissionValue: "",
            pid: "",
            redirect: "",
            sort: 0,
            status: 0,
            title: "",
            type: 0,
          };
        } else {
          this.$message.error("新增失败");
          this.form = {
            alwaysShow: false,
            children: [{}],
            component: "",
            hidden: false,
            icon: "",
            isDeleted: false,
            isSelect: false,
            level: 0,
            meta: "",
            name: "",
            path: "",
            permissionValue: "",
            pid: "",
            redirect: "",
            sort: 0,
            status: 0,
            title: "",
            type: 0,
          };
        }
      });
    },
    changeMenu() {},
    //   加meta
    addMeta() {
      //   this.count++;
      this.meta.push({
        // count: this.count,
        input: "",
        value: "",
      });
    },
    //   减去meta
    subtractMeta(index) {
      //   this.count--;
      if (this.meta.length == 1) {
      } else {
        this.meta.splice(index, 1);
      }
    },
    cancle() {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.btnshow = true;
      this.meta = [
        {
          key: "",
          value: "",
        },
      ];
      this.form = {
        alwaysShow: false,
        children: [{}],
        component: "",
        hidden: false,
        icon: "",
        isDeleted: false,
        isSelect: false,
        level: 0,
        meta: "",
        name: "",
        path: "",
        permissionValue: "",
        pid: "",
        redirect: "",
        sort: 0,
        status: 0,
        title: "",
        type: 0,
      };
    },
    change(formData) {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.btnshow = false;
      console.log(formData);
      if (formData.meta) {
        this.meta = [];
      }
      for (var key in JSON.parse(formData.meta)) {
        var obj = {
          key: key,
          value: JSON.parse(formData.meta)[key],
        };
        this.meta.push(obj);
      }
      this.form = formData;
    },
    init() {
      menuApi.findAllPermissions().then((res) => {
        console.log(res);
        this.options = res.data.menus;
      });
    },
  },

  computed: {},

  watch: {},
};
/*
Permission对象 {
    alwaysShow (boolean, optional): 跟前端路由一致,alwaysShow: 0 false; 1 true ,
    children (Array[Permission对象], optional): 下级 ,
    component (string, optional): 组件路径 ,
    createTime (string, optional): 创建时间 ,
    hidden (boolean, optional): 跟前端路由一致,hidden: 0 false, 1 true ,
    icon (string, optional): 图标 ,
    id (string, optional): 编号 ,
    isDeleted (boolean, optional): 逻辑删除 1（true）已删除， 0（false）未删除 ,
    isSelect (boolean, optional): 是否选中 ,
    level (integer, optional): 层级 ,
    meta (string, optional): 前端meta字符串对象 ,
    modifyTime (string, optional): 更新时间 ,
    name (string, optional): 名称 ,
    path (string, optional): 访问路径 ,
    permissionValue (string, optional): 权限值 ,
    pid (string, optional): 所属上级 ,
    redirect (string, optional): 重定向,跟前端路由配置一直 ,
    sort (integer, optional): 排序 ,
    status (integer, optional): 状态(0:禁止,1:正常) ,
    title (string, optional): 标题 ,
    type (integer, optional): 类型(1:菜单,2:按钮)
}
*/
</script>

<style scoped lang='scss'>
</style>